<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { reqHospitalLevelAndRegin } from '@/services/modules/home';
import type { HospitalLevelandReginArrInterface, IHospitalLevelandReginData } from '@/services/modules/home/type';

import CateTab from '@/components/cate-tab/index.vue';

const levelArr = ref<HospitalLevelandReginArrInterface>([]);
const regionArr = ref<HospitalLevelandReginArrInterface>([]);

const levelCurrent = ref<string>('');
const regionCurrent = ref<string>('');

const fetchLevelData = async () => {
  const res: IHospitalLevelandReginData = await reqHospitalLevelAndRegin('HosType');
  console.log('levelArr:', res);
  levelArr.value = res.data;
};
const fetchRegionData = async () => {
  const res: IHospitalLevelandReginData = await reqHospitalLevelAndRegin('Beijin');
  console.log('regionArr', res);
  regionArr.value = res.data;
};
const cateTabClickHandle = (currentVal: string, parentId: number) => {
  if (parentId && parentId === 10000) {
    levelCurrent.value = currentVal;
  } else if (parentId === 110100) {
    regionCurrent.value = currentVal;
  }

  console.log('currentVal', currentVal, parentId);
};

onMounted(() => {
  fetchLevelData();
  fetchRegionData();
});
defineExpose({
  levelCurrent,
  regionCurrent,
});
</script>
<template>
  <div class="level">
    <h2 class="title">医院</h2>
    <div class="tabcontent">
      <!-- 抽取 -->
      <CateTab @cateTabClickHandle="cateTabClickHandle" title="等级" :levelArr="levelArr"></CateTab>
      <CateTab @cateTabClickHandle="cateTabClickHandle" title="地区" :levelArr="regionArr"></CateTab>
    </div>
  </div>
</template>
<style scoped lang="scss">
.level {
  .title {
    letter-spacing: 1px;
    font-weight: 700;
    color: #333;
    font-size: 16px;
    margin-bottom: 30px;
  }
  .tabcontent {
    margin-bottom: 20px;
  }
}
</style>
